<template>
  <div class="container-fluid">
    <div class="row index-title school-model">
      <ul class="mr-auto col row">
        <li class="nav-item" style="margin-right:10px;">
          <a-badge count="0" dot>
            <a-avatar :src="getuser.headimg" :size="70" icon="user" />
          </a-badge>
        </li>
        <li class="nav-item">
          <h3 class="h-70 text-end">{{getuser.name }}，祝你开心每一天！</h3>
          <h4 class="h-70 text-top">{{getschool.name }}</h4>
        </li>
      </ul>
      <ul class="my-2 my-lg-0">
        <li class="nav-item d-inline-block">
          <div class="nav-item-top">今日课程数</div>
          <div class="nav-item-center">
            <router-link :to="{name: '上课签到'}">{{getschedule.course}}</router-link>
          </div>
        </li>
        <li class="nav-item gang d-inline-block"></li>
        <li class="nav-item d-inline-block">
          <div class="nav-item-top">今日课时数</div>
          <div class="nav-item-center">
            <router-link :to="{name: '上课签到'}">{{getschedule.hour}}</router-link>
          </div>
        </li>
        <li class="nav-item gang d-inline-block"></li>
        <li class="nav-item d-inline-block">
          <div class="nav-item-top">完成课时数</div>
          <div class="nav-item-center">
            <router-link :to="{name: '上课签到'}">{{getschedule.over}}</router-link>
          </div>
        </li>
      </ul>
    </div>
    <div class="row index-model school-model">
      <div class="school-model-header container-fluid">
        <div class="row">
          <div class="col">
            <span class="school-hangdi">1</span>
            <span class="school-hangdi-text">常用功能</span>
          </div>
          <div class="col text-right">
            <el-button type="text" size="small" @click="isaddress = true">
              设置
              <i class="el-icon-d-arrow-right"></i>
            </el-button>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <router-link
              v-for="(v, i) in list"
              :key="`1index${i}`"
              class="icon_lists school-biaoqian"
              :to="getlist(v)"
              v-show="userrole.find(vo=> v.name === vo.name)"
            >
              <svg class="icon svg-icon" style="color: #ffffff;" aria-hidden="true">
                <use :xlink:href="v.icon" />
              </svg>
              <span>{{v.name}}</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="row index-model school-model">
          <div class="school-model-header container-fluid">
            <div class="row">
              <div class="col">
                <span class="school-hangdi">1</span>
                <span class="school-hangdi-text">待办提醒</span>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <worker v-bind="{getschoolclazzschedule}"></worker>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择菜单" :visible.sync="isaddress">
      <el-checkbox-group v-model="checkedCities" :min="1" :max="16">
        <el-checkbox
          v-for="(city, i) in r"
          v-show="userrole.find(v=> v.name === city.name)"
          :label="city.name"
          :key="`2index${i}`"
        >{{city.name}}</el-checkbox>
      </el-checkbox-group>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import worker from "../worker/index.vue";
import { totime } from "../../../utils.js";
import { indexOf, filter } from "underscore";
import { asyncgetschoolclazzschedule } from "../../../../plugins/api.js";
export default {
  name: "index",
  computed: {
    ...mapGetters([
      "getschool",
      "getuser",
      "getschoolauthtype",
      "getschoolrole"
    ]),
    getschedule() {
      const { getschoolclazzschedule, totime, getuser } = this;
      const h = new Date().getHours();
      const course = getschoolclazzschedule.filter(
        v =>
          totime(v.starttime) == totime(new Date()) &&
          getuser.ID == v.schooluserid
      );
      let hour = 0;
      for (let v of course) {
        hour += v.hour;
      }
      const over = course.filter(
        v => v.schoolclasstime.split("-")[1].split(":")[0] < h
      );
      return {
        course: course.length,
        hour,
        over: over.length
      };
    },
    userrole() {
      const { type, schoolroleid } = this.getuser;
      if (type === "root") {
        return this.getschoolauthtype;
      } else {
        if (schoolroleid) {
          const { authtypes } = this.getschoolrole.find(
            v => v.ID == schoolroleid
          );
          let arr = [];
          if (authtypes && authtypes.name) {
            arr = authtypes.name;
          }
          const data = filter(
            this.getschoolauthtype,
            v => indexOf(arr, v.ID.toString()) != -1
          );
          return data;
        } else {
          return [];
        }
      }
    }
  },
  data() {
    const r = [
      {
        icon: "#iconzuzhijiagou",
        name: "组织架构"
      },
      {
        icon: "#iconjiaoshiguanli",
        name: "教室"
      },
      {
        icon: "#iconyuangongguanli",
        name: "员工"
      },
      {
        icon: "#iconjiaoseguanli",
        name: "机构角色"
      },
      {
        icon: "#iconkecheng",
        name: "课程"
      },
      {
        icon: "#iconbanjishezhi",
        name: "班级"
      },
      {
        icon: "#iconxueyuan-wodexueyuan",
        name: "学员"
      },
      {
        icon: "#iconshangke",
        name: "排课"
      },
      {
        icon: "#iconshangkeshijian",
        name: "上课时间设置"
      },
      {
        icon: "#iconholiday",
        name: "节假日设置"
      },
      {
        icon: "#iconqiandao1",
        name: "上课签到"
      },
      {
        icon: "#icondianping",
        name: "下课点评"
      },
      {
        icon: "#iconzuoye",
        name: "课后作业"
      },
      {
        icon: "#icongonggao",
        name: "通知公告"
      },
      {
        icon: "#iconjingyinggaikuang-",
        name: "经营概况"
      },
      {
        icon: "#iconbaobiao",
        name: "教务报表"
      }
    ];
    return {
      isaddress: false,
      checkedCities: [],
      list: [
        {
          icon: "#iconshangke",
          name: "排课"
        },
        {
          icon: "#iconqiandao1",
          name: "上课签到"
        },
        {
          icon: "#icondianping",
          name: "下课点评"
        },
        {
          icon: "#iconzuoye",
          name: "课后作业"
        },
        {
          icon: "#iconbanjishezhi",
          name: "班级"
        },
        {
          icon: "#iconxueyuan-wodexueyuan",
          name: "学员"
        }
      ],
      r,
      getschoolclazzschedule: []
    };
  },
  watch: {
    checkedCities(v) {
      this.list = this.r.filter(vo => v.includes(vo.name));
    }
  },
  mounted() {
    this.start();
  },
  methods: {
    async start() {
      try {
        this.getschoolclazzschedule = await asyncgetschoolclazzschedule({
          starttime: new Date(this.totime(new Date()))
        });
      } catch (err) {
        console.log(err);
      }
    },
    getlist(v) {
      const time = new Date().toLocaleDateString()
      if (v.name === '下课点评') {
        return {
          name: v.name,
          params: {
            time
          }
        }
      } else {
        return { name: v.name }
      }
    },
    totime,
    isshow(name) {
      let z = true;
      let id = this.getschoolauthtype.find(vo => vo.name == name);
      if (id) {
        const x = this.userrole.find(vo => vo.name == id.name);
        if (!x) {
          z = false;
        }
      }
      return z;
    }
  },
  created() {
    const list = localStorage.getItem("list");
    if (list) {
      this.list = JSON.parse(list);
    }
    this.checkedCities = this.list.map(v => v.name);
  },
  beforeDestroy() {
    localStorage.setItem("list", JSON.stringify(this.list));
  },
  components: {
    worker
  }
};
</script>


<style lang="scss" scoped>
@import "@/scss/settings.scss";
@import "@/scss/base.scss";

.mr-auto {
  padding-top: 15px;
  text-align: center;
}
.index-title {
  padding-left: 15px;
  align-items: center;
}
.nav-item {
  list-style-type: none;
}

.navbar-expand-lg {
  width: 100%;
}
.my-2 {
  width: 480px;
}
.h-70 {
  height: 42px;
  margin-bottom: 0px;
}
.text-end {
  text-align: end;
  font-size: 18px;
  line-height: 42px;
  color: #444444;
}
.text-top {
  text-align: start;
  line-height: 30px;
  color: #707070;
}
.nav-item-top {
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 138px;
  color: $htecolor2;
}
.nav-item-center {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 52px;
  width: 138px;
  color: $htecolor2;
}
.gang {
  width: 2px;
  height: 48px;
  border: 2px solid rgba(0, 153, 255, 1);
  opacity: 0.28;
  margin-top: 18px;
}
.index-model {
  margin-top: 13px;
  min-height: 100px;
}
.icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .svg-icon {
  width: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>